<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import http from '@/utils/api.js';

const route = useRoute(); // 用于获取路由参数

// 获取用户 ID，查看 route.query 是否正确
const userId = ref(localStorage.getItem('userId'));

// 用户头像
const profile = ref('');

// 加载用户信息
const loadUserInfo = async () => {
  try {
    console.log("请求路径: ", `/user/id/${userId.value}`); // 打印请求路径
    const response = await http.get(`/user/id/${userId.value}`);
    console.log("response:", response); // 打印 API 响应内容

    if (response.code === 200) {
      // 如果返回的数据中有 profile 字段
      profile.value = response.data.profile || ''; // 如果 profile 为空，设为默认空字符串
    } else {
      console.error('未找到用户信息');
    }
  } catch (error) {
    console.error('加载用户信息失败:', error);
  }
};

// 页面加载时获取用户信息
onMounted(() => {
  loadUserInfo();
});
</script>

<template>
  <el-page-header :show-back="false"> <!-- 确保回退按钮隐藏 -->
    <template #icon>
      <!-- 如果有 profile，则直接显示 Base64 编码的图片，否则显示默认头像 -->
      <img
          :src="profile ? profile : '/pic/default-avatar.jpg'"
          alt="User Avatar"
          class="custom-icon"
      />
    </template>
    <template #content>
      <span class="text-large font-600 mr-3"> 商品管理系统 </span>
    </template>
  </el-page-header>
</template>

<style scoped>
.custom-icon {
  width: 24px; /* 设置宽度 */
  height: 24px; /* 设置高度 */
  margin-right: 8px; /* 右边距 */
  vertical-align: middle; /* 垂直居中对齐 */
  border-radius: 50%; /* 圆形头像 */
  object-fit: cover; /* 保持图片内容比例 */
}
</style>
